<template>
  <v-item-group selected-class="selected bg-black" v-model="chargeIndex">
    <v-container>
      <v-row>
        <v-col
            v-for="(item, n) in items"
            :key="n"
            cols="12"
            md="3"
        >
          <v-item v-slot="{ isSelected, selectedClass, toggle }">
            <v-card
                :class="['d-flex align-center', selectedClass]"
                height="150"
                dark
                @click="toggle"
                rounded="lg"
            >
              <div
                  class="text-h3 flex-grow-1 text-center"
              >
                {{item.value}}<span class="text-h6">算力</span>
                <v-spacer/>
                <span class="text-h6">￥{{item.price}}.00</span>
              </div>

            </v-card>
          </v-item>
        </v-col>
        <v-col
            :key="items.length"
            cols="12"
            md="6">
          <v-item v-slot="{ isSelected, selectedClass, toggle }">
            <v-card
                :class="['d-flex align-center', selectedClass]"
                height="150"
                dark
                @click="toggle"
                rounded="lg"
            >
              <v-text-field v-model="chargeNumber" label="请输入充值的算力额度" variant="outlined"
                            class="ma-2"></v-text-field>


            </v-card>
          </v-item>

        </v-col>

      </v-row>
      <we-chat-pay-code :amount="+chargeNumber" :description="items[chargeIndex||0]?.name||`自定义充值${chargeNumber}`"/>
    </v-container>
  </v-item-group>
</template>
<script lang="ts" setup>


import WeChatPayCode from "~/components/payment/WeChatPayCode.vue";

//充值金额
const chargeNumber = defineModel({
  default: 100
})

const chargeIndex = ref<number|undefined>(0)  //选中的充值序号
watch(chargeIndex, (newValue) => {
  console.log(newValue)
  if (newValue && newValue !== items.length ||newValue === 0) {
    chargeNumber.value = items[newValue].value
    console.log(newValue,chargeNumber.value)
  }

})


const items = [
  {
    name: '100算力',
    value: 100,
    price: 1,
    selected: false,
  },
  {
    name: '500算力',
    value: 500,
    price: 5,
    selected: false,
  },
  {
    name: '1500算力',
    value: 1500,
    price: 15,
    selected: false,
  },
  {
    name: '3000算力',
    value: 3000,
    price: 30,
    selected: false,
  },
  {
    name: '5000算力',
    value: 5000,
    price: 50,
    selected: false,
  },
  {
    name: '10000算力',
    value: 10000,
    price: 100,
    selected: false,
  },
]

</script>
<style>
.selected {
  border: 1px solid yellow;
}

</style>